<template>
  <div class="login-page">
    <div class="nav">nav</div>
    <div class="login-from">
      <a-form :model="formData">
        <a-form-item>
          <a-input
            v-model:value="formData.name"
            size="large"
            placeholder="请输入手机号"
            allowClear
          />
        </a-form-item>
        <a-form-item class="customer-item">
          <CountdownInput  size="large"  v-model:value="formData.sms" :placeholder="'请输入验证码'" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="onSubmit" block>登 录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, UnwrapRef } from "vue";
import { CountdownInput } from "@/components/CountDown";
interface FormState {
  name: string;
  smsCode: string;
}
export default defineComponent({
  components: {
    CountdownInput,
  },
  setup() {
    const formData: UnwrapRef<FormState> = reactive({
      name: "",
      smsCode: "",
    });

    return {
      formData,
    };
  },
});
</script>

<style lang="scss" scoped>
.login-page {
  padding: 0 20px;
  font-size: 16px;
  .nav {
    height: 44px;
  }
  .login-from {
    /deep/ .ant-input-group-addon{
      border:0;
      background-color:#fff
    }
    .ant-input-affix-wrapper {
      border: 0;
      border-bottom: 1px solid #d9d9d9;
    }
    .ant-input-affix-wrapper:focus {
      box-shadow: none;
    }
    input {
      border: none !important;
    }
    .ant-input:focus,
    .ant-input-affix-wrapper-focused {
      box-shadow: none;
    }
    .ant-btn-primary {
      height: 40px;
      background-image: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
      border-radius: 20px;
      font-size: 20px;
      box-shadow: none;
      border: 0;
    }
    .customer-item{
      border-bottom:1px solid #d9d9d9
    }
  }
}
</style>
